<template>
  <el-dialog
    title="上传签章"
    width="400px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :append-to-body="true"
    :visible="visible"
  >
    <div class="content">
      <imageUpBtn
        :file-key="fileKey"
        :link-biz-pk="userId"
        @change="fileChange"
      />
    </div>
    <div slot="footer" style="text-align: center; margin-top: 20px">
      <el-button type="primary" @click="save">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import imageUpBtn from '@/components/fileUp/imageUpBtn'
export default {
  components: {
    imageUpBtn
  },
  props: {
    fileKey: {
      type: String,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      file: null,
      userId: null
    }
  },
  computed: {
    user() {
      return this.$store.getters.user
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    reset() {
      this.userId = this.user.EmpId
      this.file = null
    },
    fileChange(fileId, files) {
      if (files.length === 0) {
        this.file = null
      } else {
        this.file = files[0]
      }
    },
    save() {
      if (this.file == null) {
        this.$message({
          type: 'error',
          message: '还未上传文件!'
        })
        return
      }
      this.$emit('update:visible', false)
      this.$emit('save', this.file)
    }
  }
}
</script>

<style scoped>
.content {
  width: 400px;
  height: 200px;
  text-align: center;
}
</style>
